<template>
  <div class="page-content">
    <div class="condition">
      <div class="condition-content">
        <Form ref="queryForm" label-position="right" :model="queryForm" inline>
          <Row>
            <Col span="6">
              <FormItem label="系统名称：" prop="name" :labelWidth="100">
                <Input type="text" v-model="queryForm.name" placeholder="系统名称：" />
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="query('queryForm')">查询</Button>
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="handlerReset('queryForm')">重置</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
    <div class="operation">
      <Row>
        <Col span="24">
          <Button type="primary" @click="openAddPage">新增</Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openModPage">修改</Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openDelPage">删除</Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openMaintainPage">系统管理员维护</Button>
        </Col>
      </Row>
    </div>
    <div class="content">
      <Table
        border
        stripe
        :columns="columns"
        :data="data"
        height="480"
        highlightRow
        @on-row-click="rowClick"
      >
        <template slot="footer">
          <Page
            show-total
            :total="total"
            @on-change="pageChange"
            show-sizer
            :pageSizeOpts="[5,10,15,20]"
            @on-page-size-change="pageSizeChange"
          ></Page>
        </template>
      </Table>
    </div>
    <!--添加页面-->
    <Modal
      :title="isAddFlag?'添加':'修改'"
      :closable="true"
      :maskClosable="true"
      v-model="addEditPageFlag"
      @on-ok="addOK('addForm')"
      @on-cancel="addCancel('addForm')"
    >
      <Form ref="addForm" :model="tmpForm">
        <FormItem label="系统名称：" prop="name" :labelWidth="100">
          <Input type="text" v-model="tmpForm.name" placeholder="系统名称" />
        </FormItem>
        <FormItem label="系统描述：" prop="desc" :labelWidth="100">
          <Input type="text" v-model="tmpForm.desc" placeholder="系统描述" />
        </FormItem>
        <FormItem label="上下文：" prop="context" :labelWidth="100">
          <Input type="text" v-model="tmpForm.context" placeholder="上下文" />
        </FormItem>
        <FormItem label="URL：" prop="url" :labelWidth="100">
          <Input type="text" v-model="tmpForm.url" placeholder="地址" />
        </FormItem>
        <FormItem label="图片：" prop="picture" :labelWidth="100">
          <upload-image v-model="tmpForm.picture"></upload-image>
        </FormItem>
      </Form>
    </Modal>
    <!--用户选择框-->
    <Modal
      title="请选择用户"
      :closable="true"
      :maskClosable="true"
      v-model="maintainModalFlag"
      @on-ok="maintainOk"
      @on-cancel="maintainCancel"
    >
      <query-user @select="selectUser"></query-user>
    </Modal>
  </div>
</template>
<script>
import { queryUserApi } from '@/api/user'
import {
  addSystemApi,
  editSystemApi,
  deleteSystemApi,
  maintainSystemApi,
  querySystemApi,
} from '@/api/system'
import QueryUser from './query-user'
import queryUser from './query-user.vue'
import UploadImage from '_c/upload-image'
export default {
  components: { queryUser },
  name: 'system-manager',
  data() {
    return {
      queryForm: {
        name: '',
      },
      tmpForm: {},
      delId: '', //需要删除的用户ID
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      columns: [
        {
          title: '系统名称',
          key: 'name',
        },
        {
          title: '上下文',
          key: 'context',
        },
        {
          title: '地址',
          key: 'url',
        },
        {
          title: '管理员',
          key: 'manager',
        },
        {
          title: '系统描述',
          key: 'desc',
        },
        {
          title: '图片',
          key: 'picture',
          minWidth: 200,
          render: (h, params) => {
            return h('div', [h('img', { attrs: { src: params.row.picture } })])
          },
        },
        {
          title: '创建时间',
          key: 'createDate',
        },
        {
          title: '创建人员',
          key: 'createOper',
        },
        {
          title: '修改时间',
          key: 'modifyDate',
        },
        {
          title: '修改人员',
          key: 'modifyOper',
        },
      ],
      data: [], //用户数据
      total: 0,
      isAddFlag: false, //是否是添加标志
      addEditPageFlag: false, //添加页面模态窗口标志
      maintainModalFlag: false, //系统维护管理员模态窗口标志
      selectFlag: false, //系统维护管理员是否已经选中数据
      maintainData: {},
      tblCurIndex: undefined, //选中角标
      tblCurData: {}, //选中数据
    }
  },
  components: { QueryUser, UploadImage },
  methods: {
    query(name) {
      let condition = this.$refs[name].model
      var param = {}
      param.condition = condition
      param.page = this.page
      querySystemApi(param)
        .then((response) => {
          this.data = response.data
          this.total = response.page.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handlerReset(name) {
      this.$refs[name].resetFields()
    },
    pageChange(pageNum) {
      this.page.pageNum = pageNum
      this.query('queryForm')
    },
    pageSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.query('queryForm')
    },
    openAddPage() {
      this.isAddFlag = true
      this.addEditPageFlag = true
    },
    openModPage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择用户')
        return
      }
      this.tmpForm = Object.assign({}, this.tblCurData)
      this.isAddFlag = false
      this.addEditPageFlag = true
    },
    openDelPage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择需要删除系统')
        return
      }
      this.$Modal.confirm({
        title: '删除系统',
        content: '请确认是否要删除【' + this.tblCurData.name + '】系统?',
        onOk: this.delOK,
      })
    },
    addCancel(name) {
      this.$refs[name].resetFields()
    },
    addOK(name) {
      let param = Object.assign({}, this.tmpForm)
      if (this.isAddFlag) {
        addSystemApi(param)
          .then((data) => {
            this.$refs[name].resetFields()
            this.$Message.success('添加用户成功')
            this.query('queryForm')
          })
          .catch((error) => console.log(error))
      } else {
        editSystemApi(param)
          .then((data) => {
            this.$refs[name].resetFields()
            this.$Message.success('编辑用户成功')
            this.query('queryForm')
          })
          .catch((error) => console.log(error))
      }
    },
    delOK() {
      let param = {}
      param.id = this.tblCurData.id
      deleteSystemApi(param)
        .then((data) => {
          this.$Message.success('删除成功')
          this.query('queryForm')
        })
        .catch((error) => console.log(error))
    },
    openMaintainPage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择系统')
        return
      }
      this.maintainModalFlag = true
    },
    maintainOk() {
      if (this.selectFlag == false) {
        this.$Message.warning('请选择用户')
        return
      }
      let param = {}
      param.systemId = this.tblCurData.id
      param.userId = this.maintainData.id
      maintainSystemApi(param)
        .then((data) => {
          this.$Message.warning('维护成功')
          this.maintainData = {}
          this.selectFlag = false
          this.query('queryForm')
        })
        .catch((error) => console.log(error))
    },
    maintainCancel() {
      this.maintainData = {}
    },
    selectUser(data) {
      this.selectFlag = true
      this.maintainData = data
    },
    rowClick(data, index) {
      this.tblCurIndex = index
      this.tblCurData = data
    },
  },
  created: function () {},
  watch: {
    'queryForm.systemId': function (systemId) {
      if (systemId == undefined || systemId == '') {
        this.roleList = []
      } else {
        getRolesBySystemIdApi(systemId)
          .then((data) => {
            this.roleList = data
          })
          .catch((error) => console.log(error))
      }
    },
  },
}
</script>
<style lang="less" scoped>
.page-content > .condition {
  border: 1px solid #b8c7cb;
}

.page-content > .condition > .condition-content {
  margin-top: 10px;
}

.page-content > .operation {
  margin-top: 15px;
  background-color: rgba(113, 182, 114, 0.1);
}
</style>